<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./static/static/vue.min.js"></script>
    <script src="./static/static/axios.min.js"></script>
    <!-- 本地引入lib-master -->
    <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
    <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id='app'>
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
            label-width="100px">
            <el-form-item label="用户id" prop="oid" hidden>
                <el-input v-model="dataForm.oid" placeholder="用户id"></el-input>
            </el-form-item>
            <el-form-item label="用户id" prop="userId" hidden>
                <el-input v-model="dataForm.userId" placeholder="用户id"></el-input>
            </el-form-item>
            <el-form-item label="商品id" prop="goodsId" hidden>
                <el-input v-model="dataForm.goodsId" placeholder="商品id"></el-input>
            </el-form-item>
            <el-form-item label="活动id" prop="activityId" hidden>
                <el-input v-model="dataForm.activityId" placeholder="活动id"></el-input>
            </el-form-item>
            <el-form-item label="商品名称" prop="goodsName">
                {{dataForm.goodsName}}
                <!-- <el-input v-model="dataForm.goodsName" placeholder="商品名称" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="商品单价(元)" prop="goodsPrice">
                {{dataForm.goodsPrice}}
                <!-- <el-input v-model="dataForm.goodsPrice" placeholder="商品单价" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="商品数量(件)" prop="goodsCount">
                {{dataForm.goodsCount}}
                <!-- <el-input v-model="dataForm.goodsCount" placeholder="商品数量" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="登录系统" prop="goodsChannel">
                <span v-if="dataForm.goodsChannel==1">pc</span>
                <span v-if="dataForm.goodsChannel==2">android</span>
                <span v-if="dataForm.goodsChannel==3">ios</span>
                <!-- <el-input v-model="dataForm.goodsChannel" placeholder="1.pc 2.android 3.ios" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="订单状态：" prop="status">
                <span v-if="dataForm.status==0">未支付</span>
                <span v-if="dataForm.status==1">已支付</span>
                <span v-if="dataForm.status==2">已发货</span>
                <span v-if="dataForm.status==3">已收货</span>
                <span v-if="dataForm.status==4">已退款</span>
                <span v-if="dataForm.status==5">已完成</span>
                <!-- <el-input v-model="dataForm.status" disabled placeholder="订单状态：0新建未支付，1已支付，2已发货，3已收货，4已退款，5已完成"></el-input> -->
            </el-form-item>
            <el-form-item label="订单创建时间" prop="createDate">
                {{dataForm.createDate}}
                <!-- <el-input v-model="dataForm.createDate" placeholder="订单创建时间" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="收货地址" prop="deliveryAddrId" hidden>
                <el-input v-model="dataForm.deliveryAddrId" placeholder="收货地址"></el-input>
            </el-form-item>
            <el-form-item label="支付时间" prop="payDate" hidden>
                <el-input v-model="dataForm.payDate" placeholder="支付时间"></el-input>
            </el-form-item>
            <el-form-item label="砍价链接" prop="createDate">
                <span ref="p">{{dataForm.links}}</span>
            </el-form-item>


        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <template>
                <el-button type="text" @click="shareLink()">复制链接</el-button>
            </template>

            <el-button type="primary" @click="payment()">去支付</el-button>

        </span>

    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {

                    dataUrl: "http://localhost:88/api",
                    dataForm: {
                        oid: 0,
                        userId: localStorage.getItem("userId"),
                        goodsId: '',
                        bid: localStorage.getItem("bid"),
                        deliveryAddrId: '',
                        goodsName: '',
                        goodsCount: '',
                        goodsPrice: '',
                        goodsChannel: '',
                        status: 0,
                        createDate: '',
                        payDate: '',
                        links: ''
                    },
                    token:localStorage.getItem("token"),
                    dataRule: {
                        deliveryAddrId: [
                            // { required: true, message: '收货地址id不能为空', trigger: 'blur' }
                        ],


                    }
                }
            },
            //方法集合
            methods: {
                init() {
                    this.$nextTick(() => {
                        this.$refs['dataForm'].resetFields()

                        axios({
                            url: `${this.dataUrl}/bargain/barorder/info/${this.dataForm.userId}/${this.dataForm.bid}`,
                            method: 'get',
                            // params: this.$http.adornParams()
                        }).then(({ data }) => {
                            if (data && data.code === 0) {
                                console.log(data)
                                this.dataForm.oid = data.order.oid
                                this.dataForm.userId = data.order.userId
                                this.dataForm.goodsId = data.order.goodsId
                                this.dataForm.activityId = data.order.activityId
                                this.dataForm.deliveryAddrId = data.order.deliveryAddrId
                                this.dataForm.goodsName = data.order.goodsName
                                this.dataForm.goodsCount = data.order.goodsCount
                                this.dataForm.goodsPrice = data.order.goodsPrice
                                this.dataForm.goodsChannel = data.order.goodsChannel
                                this.dataForm.status = data.order.status
                                this.dataForm.createDate = data.order.createDate
                                this.dataForm.payDate = data.order.payDatelp
                                this.generateLinks(data.order.oid)
                            }
                        })

                    })
                        
                },
                payment() {
                    location = `http://localhost:7200/bargain/barorder/payment?oid=${this.dataForm.oid}`
                },
                //根据订单的信息生成链接
                generateLinks(oid) {
                   axios({
                        url:`${this.dataUrl}/bargain/barorder/generateLinks/${oid}`,
                        method: 'get',
                        headers:{"token":this.token}
                    }).then(({ data }) => {
                        if (data && data.code === 0) {
                            console.log(data)
                            this.dataForm.links=data.links
                        }
                    })
                

            },
            //分享链接(复制链接)
            shareLink() {

                //点击复制
                var copyText = this.$refs.p.innerText;
                var input = document.createElement("input"); // 直接构建input
                input.value = copyText; // 设置内容
                document.body.appendChild(input); // 添加临时实例
                input.select(); // 选择实例内容
                document.execCommand("Copy"); // 执行复制
                document.body.removeChild(input); // 删除临时实例

                this.$alert(copyText, '复制链接', {
                    confirmButtonText: '点击复制',
                    callback: action => {
                        this.$message({
                            type: 'success',
                            message: `复制成功`

                        });
                    }
                });
            },



        },
            created() {
            console.log(this.token)
            this.init()
        },

    
        })
    </script>
</body>

</html>